/** 艺考问答等页面公共头部 */
import React from "react"
import { Sticky, Search } from "@taroify/core"
import {
  Swiper,
  SwiperItem,
  Image,
  ScrollView,
  BaseEventOrig,
  Navigator,
  View
} from "@tarojs/components"
import clsx from "clsx"
import { InputProps } from "@tarojs/components/types/Input"
import { pageMapper, PagePath } from "@/constants/pageMap"
import styles from "./index.module.scss"
import { commonUrls, navigation } from "@/utils/router"

type IFilter = IOption & { link: string }
const filters: IFilter[] = [
  { text: "艺考动态", value: 0, link: pageMapper.examDynamic },
  { text: "艺考问答", value: 1, link: pageMapper.examQA },
  { text: "培训指南", value: 2, link: pageMapper.trainGuide },
  { text: "艺考政策", value: 3, link: pageMapper.examStrategy }
]
type IProps = {
  className?: string
  curFilter: number
  onSearch: (keyword: string) => any
  onTabChange?: (filter: IFilter) => any
  onChange?: (keyword: string) => any
}
const GpTopHeader: React.FC<IProps> = (props: IProps) => {
  const { className, curFilter = 0, onSearch, onChange } = props
  /** 轮播 */
  function renderSwiper() {
    return (
      <View className="pb-8px">
        <Swiper
          className="h-248px"
          indicatorColor="rgba(255, 255, 255, 0.5)"
          indicatorActiveColor="#FFFFFF"
          circular
          indicatorDots
          autoplay
        >
          <SwiperItem>
            <Navigator
              url={commonUrls.examGuide}
              hoverClass="none"
              className="w-690px h-248px rounded-16px bg-hex-ff0 overflow-hidden mx-auto"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_1.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </Navigator>
          </SwiperItem>
          <SwiperItem>
            <Navigator
              url={commonUrls.institution}
              hoverClass="none"
              className="w-690px h-248px rounded-16px bg-hex-ff0 overflow-hidden mx-auto"
              openType="switchTab"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_2.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </Navigator>
          </SwiperItem>
          <SwiperItem>
            <Navigator
              url={commonUrls.news}
              hoverClass="none"
              className="w-690px h-248px rounded-16px bg-hex-ff0 overflow-hidden mx-auto"
            >
              <Image
                src="https://static.91goodschool.com/UpFiles/public/yikao/image/banner_3.png"
                className="w-690px h-248px"
                mode="aspectFill"
              />
            </Navigator>
          </SwiperItem>
        </Swiper>
      </View>
    )
  }
  function renderTabs() {
    const len = filters.length
    return (
      <Sticky>
        <View className="h-90px box-border bg-hex-fff z-10">
          <ScrollView scrollX scrollWithAnimation className="whitespace-nowrap">
            {filters.map((l, index) => (
              <View
                hoverClass="none"
                onClick={() => handleClickFilter(l)}
                className={clsx(styles["item"], {
                  [styles["active"]]: curFilter === l.value,
                  [styles["first-child"]]: index === 0,
                  [styles["last-child"]]: index === len - 1 && len > 1
                })}
                key={l.value}
              >
                {l.text}
                <View className={styles["slider"]}></View>
              </View>
            ))}
          </ScrollView>
        </View>
      </Sticky>
    )
  }
  function handleClickFilter(filter: IFilter) {
    if (filter.value !== curFilter) {
      navigation(filter.link as PagePath, null, "redirectTo")
    }
  }
  function handleSearch(ev: BaseEventOrig<InputProps.inputValueEventDetail>) {
    onSearch(ev.detail.value)
  }
  function handleChange(ev: BaseEventOrig<InputProps.inputValueEventDetail>) {
    onChange && onChange(ev.detail.value)
  }
  return (
    <View className={clsx("bg-hex-fff", className)}>
      {/* 搜索框 */}
      <View className="w-682px py-32px mx-auto">
        <Search
          className={clsx("top-search", styles["top-search"])}
          shape="round"
          placeholder="请输入搜索关键词"
          onSearch={handleSearch}
          onChange={handleChange}
        />
      </View>
      {/* 轮播 */}
      {renderSwiper()}
      {/* tabs */}
      {renderTabs()}
    </View>
  )
}
export default GpTopHeader
